<template>
  <div class="container">
    <div class="topTips">
      <span class="left"> 用户中心&gt;注销列表&gt;详情页面 </span>
      <el-button type="primary" @click="$router.back()">返回</el-button>
    </div>
    <div class="frist">
      <div class="title">注册资料</div>
      <div class="content">
        <ul>
          <li><b> 用户ID</b>:{{ userInfo.id }}</li>
          <li><b>登录账号：</b>{{ userInfo.username || "暂无" }}</li>
          <li><b> 手机号归属地：</b>{{ userInfo.mobileLocation || "暂无" }}</li>
          <li>
            <b> 用户身份 </b>
            {{
              ["普通用户", "经纪人", "城市合伙人", "品牌合伙人"][
                userInfo.roleType
              ] || "暂无"
            }}
          </li>
          <b />
        </ul>
        <ul>
          <li><b> 推荐人手机号:</b>{{ userInfo.inviterMobile || "暂无" }}</li>
          <li><b> 推荐人姓名：</b>{{ userInfo.inviterName || "暂无" }}</li>
          <li><b> 注册时间:</b>{{ userInfo.createTime }}</li>
          <li>
            <b>注册渠道：</b>{{ ["", "E-Broker", "车E家"][userInfo.source] || "暂无" }}
          </li>
          <!-- <li>
            <b>注册渠道：</b>{{ ["", "E-Broker", "车E家"][userInfo.source] || "暂无" }}
          </li> -->

        </ul>
        <ul>
          <li>
            <b> 注册地址：</b>
            {{ userInfo.registerCity || "暂无" }}
          </li>
          <li>
            <b> 注销时间：</b>
            {{ $route.query.logoutTime || "暂无" }}
          </li>
          <li>
            <b> 注销渠道：</b>
            <!-- {{ $route.query.logoutTime || "暂无" }} -->
            {{ $route.query.logoutChannel=='00'?'ebroker':'车E家' }}
          </li>
        </ul>
      </div>
      <b />
    </div>
    <div class="seconds" />
    <el-collapse v-model="activeNames">

      <el-collapse-item name="4" title="实名认证">
        <template slot="title" class="title">
          <span>实名认证</span>
          <span
            class="more"
          ><span id="total"> {{ [ '未实名','已实名','未通过','已提交'][userInfo.realNameState] }}</span></span>
        </template>
        <p class="flex_p">
          <span class="flex_span">姓名:{{ userInfo.realName }}</span>
          <span class="flex_span">银行卡号:{{ userInfo.bankCardNo |filterBrandCode }}</span>
        </p>
        <p class="flex_p">
          <span class="flex_span">身份证号：{{ userInfo.idCardNo | filteridCardNo }}</span>
          <span class="flex_span">开户银行：{{ userInfo.openingBank }}</span>
        </p>
        <p class="flex_p">
          <span
            class="flex_span"
          >证件有效期：{{ userInfo.startExpireDate }}-{{
            userInfo.endExpireDate
          }}</span>
          <span class="flex_span">绑定手机：{{ userInfo.mobile | filterMoblie }}</span>
        </p>
        <div class="img_carNo">
          <div class="img_box">
            <span class="img">
              <img :src="userInfo.idCardFront" alt="" @click="open(userInfo.idCardFront)">
            </span>
            <span>身份证正面</span>
          </div>
          <div class="img_box">
            <span class="img">
              <img :src="userInfo.idCardSide" alt="" @click="open(userInfo.idCardSide)">
            </span>
            <span>身份证反面</span>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title" class="title">
          <span>基础估价</span>
          <span
            class="more"
          ><span id="total">共计{{ reportBase.total }}条</span></span>
        </template>
        <div class="mytable">
          <!-- <template slot="title">
      一致性 Consistency<i class="header-icon el-icon-info"></i>
    </template> -->

          <el-table
            ref="table"
            :key="tableKey"
            v-loading="loading"
            :data="reportBaseList"
            border
            fit
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              prop="username"
              :show-overflow-tooltip="true"
              align="center"
              type="index"
              min-width="120px"
            />
            <el-table-column
              label="报告ID"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="报告时间"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime | parseTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="品牌车型"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.modelName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="市场车型"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.salesdesc }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="上牌时间"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.regdate }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="行驶里程(万公里)"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.miles }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="所在城市"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.city }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="初步估价(万元)"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.price }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="reportBase.total > 0"
            :total="reportBase.total"
            :page.sync="reportBase.pageNum"
            :limit.sync="reportBase.pageSize"
            @pagination="reportBaseSearch"
          />
        </div>
      </el-collapse-item>
      <el-collapse-item name="5">
        <template slot="title" class="title">
          <span>买车列表</span>
          <span
            class="more"
          ><span id="total">共计{{ searchBuy.total }}条</span></span>
        </template>
        <div class="mytable">
          <el-table
            ref="table"
            :key="tableKey"
            v-loading="loading"
            :data="buyLists"
            border
            fit
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              prop="username"
              :show-overflow-tooltip="true"
              align="center"
              type="index"
              min-width="120px"
            />
            <el-table-column
              label="车辆ID"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="品牌车型"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.brandName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="市场车型"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.modelName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="上牌时间"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.spTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="行驶里程(万公里)"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.travelMileage }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="上牌城市"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.spCityName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="上架价格(万元)"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订单状态"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{
                  ["未上架", "销售中", "交易中", "已下架"][
                    scope.row.addedStatus
                  ]
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.operation')"
              align="center"
              min-width="150px"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <el-link
                  class="el-icon-view"
                  @click="view(row)"
                >
                  查看详情
                </el-link>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="searchBuy.total > 0"
            :total="searchBuy.total"
            :page.sync="searchBuy.pageNum"
            :limit.sync="searchBuy.pageSize"
            @pagination="Buysearch"
          />
        </div>
      </el-collapse-item>
      <el-collapse-item name="6">
        <template slot="title" class="title">
          <span>卖车列表</span>
          <span
            class="more"
          ><span id="total">共计{{ sellerBuy.total }}条</span></span>
        </template>
        <div class="mytable">
          <el-table
            ref="table"
            :key="tableKey"
            v-loading="loading"
            :data="sellLists"
            border
            fit
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              prop="username"
              :show-overflow-tooltip="true"
              align="center"
              type="index"
              min-width="120px"
            />
            <el-table-column
              label="车辆ID"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="品牌车型"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.brandName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="市场车型"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.modelName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="上牌时间"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.spTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="行驶里程(万公里)"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.travelMileage }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="上牌城市"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.spCityName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="上架价格(万元)"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.amount }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="上架时间"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="上架状态"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{
                  ["", "未上架", "销售中", "交易中", "已下架"][
                    scope.row.addedStatus
                  ]
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="订单状态"
              :show-overflow-tooltip="true"
              align="center"
              min-width="150px"
            >
              <template slot-scope="scope">
                <span>{{
                  ["进行中", "已完成", "已关闭"][scope.row.orderStatus]
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.operation')"
              align="center"
              min-width="150px"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <el-link
                  v-if="row.addedStatus==3 || row.addedStatus==4"
                  class="el-icon-view"
                  @click="view(row)"
                >
                  查看详情
                </el-link>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="sellerBuy.total > 0"
            :total="sellerBuy.total"
            :page.sync="sellerBuy.pageNum"
            :limit.sync="sellerBuy.pageSize"
            @pagination="sellerSearch"
          />
        </div>
      </el-collapse-item>
      <el-collapse-item name="7" title="经纪人认证">
        <template slot="title" class="title">
          <span>经纪人认证</span>
          <span
            class="more"
          ><span id="total"> {{ ['','未通过','未通过','未通过','未通过','未通过','通过','未通过','未通过'][state] || '无' }}</span></span>
        </template>
        <Compenterober @state="fnState" />
      </el-collapse-item>

      <el-collapse-item
        name="8"
      >
        <template slot="title" class="title">
          <span>邀请资料</span>
        </template>
        <div class="last">
          <div class="title">邀请资料</div>
          <div class="content">
            <ul>
              <li v-if="statisticsInviteInfo.directFansNum">
                <b>邀请人数：</b>{{
                  statisticsInviteInfo.directFansNum +
                    statisticsInviteInfo.indirectFansNum
                }}
              </li>
              <li v-else>
                <b>邀请人数：</b> 0
              </li>
            </ul>
            <ul>
              <li>直接邀请：{{ statisticsInviteInfo.directFansNum || 0 }}</li>
              <li>间接邀请：{{ statisticsInviteInfo.indirectFansNum || 0 }}</li>
            </ul>
            <ul>
              <li>认证经纪人：{{ statisticsInviteInfo.authFansNum || 0 }}</li>
              <li>普通用户：{{ statisticsInviteInfo.normalNum || 0 }}</li>
            </ul>
            <div class="inviteQrcode">
              <!-- inviteQrCode -->
              <div class="QrcodeImg">
                <img
                  v-if="statisticsInviteInfo.inviteQrCode"
                  :src="statisticsInviteInfo.inviteQrCode"
                  @click="open(statisticsInviteInfo.inviteQrCode)"
                >
              </div>
              <p>邀请码</p>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      title="图片"
      :visible.sync="imgDialogVisible"
      width="800px"
    >
      <img :src="imgUrl" style="width:750px">
    </el-dialog>
  </div>
</template>

<script>
import Compenterober from './compenterober'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Compenterober,
    Pagination
  },
  data() {
    return {
      activeNames: ['0'],
      statisticsInviteInfo: {},
      loading: false,
      imgDialogVisible: false,
      imgUrl: '',
      list: [],
      total: 0,
      userInfo: {},
      tableKey: '1',
      erbrokerData: { state: 1 },
      fit: 1,
      activeNames2: ['5'],
      activeNames3: ['0'],
      activeNames4: ['0'],
      dialogVisible: false,
      sellCarDialogVisible: false,
      viewDialogVisible: false,
      searchBuy: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      sellerBuy: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      reportBase: {
        total: 0,
        pageNum: 1,
        pageSize: 10
      },
      buyLists: [],
      sellLists: [],
      reportBaseList: [],
      state: 0,
      realNameState: 0
    }
  },
  created() {
    this.$get(`/app/user/getUser?userId=${this.$route.query.id}`).then(res => {
      console.log(this.realNameState)

      if (res.data.data && res.data.code == 0) {
        this.realNameState = res.data.data.realNameState
      }
    })
    this.$get(`/web/userOut/get?userId=${this.$route.query.id}`).then((res) => {
      if (res.data.code === '0') {
        this.userInfo = res.data.data
      }
    })
    console.log(this.$route.query.invite)
    if (Number(this.$route.query.invite) !== 0) {
      this.$get(
        `/web/user/get/statisticsInvite?userId=${this.$route.query.id}`
      ).then((res) => {
        if (res.data.code === '0') {
          this.statisticsInviteInfo = res.data.data
        }
      })
    }

    this.buyList()
    this.sellList()
    // this.reportBaseSearch()
    this.$get(`/web/user/get?userId=${this.$route.query.id}`).then((res) => {
      if (res.data.code === '0') {
        // this.userInfo = res.data.data
        this.$get(
          `/web/reportBase/list/report?pageNum=${this.reportBase.pageNum}&pageSize=${this.reportBase.pageSize}&userId=${this.$route.query.id}`
        )
          .then((res) => {
            this.loading = false
            // if (res.data.code === '0') {
            this.reportBaseList = res.data.data.rows
            // this.list = this.list.slice(0, 5)
            this.reportBase.total = res.data.data.total
            // }
          })
          .catch(() => {
            this.loading = false
          })
      }
    })
    // invite
    if (String(this.$route.query.invite) === '0') return false
    this.$get(
      `/web/user/get/statisticsInvite?userId=${this.$route.query.id}`
    ).then((res) => {
      if (res.data.code === '0') {
        this.statisticsInviteInfo = res.data.data
      }
    })
  },
  methods: {
    view(row) {
      if (row.buyWay == 1) {
        this.$router.push(`/orderCenter/details/simpleDetail?id=${row.vehicleOrderId}&userId=${row.buserId}&sellId=${row.suserId}`)
      } else {
        this.$router.push(`/orderCenter/details/processDetail?id=${row.vehicleOrderId}&userId=${row.buserId}&sellId=${row.suserId}`)
      }
      // console.log(row)
    },
    open(url) {
      this.imgUrl = url
      this.imgDialogVisible = true
    },
    preview(url) {
      console.log('222')
      this.viewDialogVisible = true
    },
    handleChange() {},
    toMore() {
      this.$router.push({
        path: '/valuation/index',
        query: {
          userNameOrMobile: this.userInfo.mobile
        }
      })
    },
    toChecked() {
      this.$router.push({
        name: 'check',
        query: {
          id: this.$route.query.id,
          status: this.erbrokerData.operateExamineState
        }
      })
    },
    reportBaseSearch(e) {
      this.reportBase.pageNum = e && e.page
      this.reportBase.pageSize = e && e.limit
      this.$get(
        `/web/reportBase/list/report?pageNum=${this.reportBase.pageNum}&pageSize=${this.reportBase.pageSize}&userId=${this.$route.query.id}`
      )
        .then((res) => {
          this.loading = false
          // if (res.data.code === '0') {
          this.reportBaseList = res.data.data.rows
          // this.list = this.list.slice(0, 5)
          this.reportBase.total = res.data.data.total
          // }
        })
        .catch(() => {
          this.loading = false
        })
    },
    sellList() {
      this.$get(
        `/web/vehicleOrder/getSellCarList?userId=${this.$route.query.id}&pageNum=${this.sellerBuy.pageNum}&pageSize=${this.sellerBuy.pageSize}`
      ).then((res) => {
        if (res.data.code === '0') {
          this.sellLists = res.data.data.rows
          this.sellerBuy.total = res.data.data.total
        }
      })
    },
    sellerSearch(e) {
      this.sellerBuy.pageNum = e.page
      this.sellerBuy.pageSize = e.limit
      this.sellList()
    },
    Buysearch(e) {
      this.searchBuy.pageNum = e.page
      this.searchBuy.pageSize = e.limit
      this.buyList()
    },
    buyList() {
      this.$get(
        `/web/vehicleOrder/getBuyCarList?bUserId=${this.$route.query.id}&pageNum=${this.searchBuy.pageNum}&pageSize=${this.searchBuy.pageSize}`
      ).then((res) => {
        if (res.data.code === '0') {
          this.buyLists = res.data.data.rows
          this.searchBuy.total = res.data.data.total
        }
      })
    },
    fnState(e) {
      this.state = e.state
    }
  }
}
</script>

<style lang='scss' scoped>
@import "../../styles/variables.scss";
img{
  cursor: pointer;
}
.topTips{
  padding: 10px;
  display: flex;
  justify-content: space-between;
}
/deep/ .el-table th,
.el-table td {
  height: 30px !important;
  padding: 0 !important;
  line-height: 30px !important;
}

ul li {
  list-style: none;
}
.container {
  background: #fff;
  border: 1px solid #dfe6ec;
  margin: 20px;
  margin-bottom: 100px;
  /* padding-left: 20px; */
}
.container /deep/ {
  .el-collapse-item__header {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    /* margin-left: 20px; */

    text-indent: 2rem;
    padding: 10px 0;
    border-bottom: 1px solid #dfe6ec;
    .more {
      position: absolute;
      right: 50px;
      top: 0;
    }
    .el-collapse-item__arrow {
      position: absolute;
      right: 10px;
      top: 15px;
      &.is-active{
      position: absolute;
      right: 0px;
      top: 0px;
      }
    }
  }
}

.container .title {
  font-size: 20px;
  font-weight: bold;
  /* margin-left: 20px; */
  text-indent: 2rem;
  padding: 10px 0;
  border-bottom: 1px solid #dfe6ec;
}

.container .content {
  border-bottom: 1px solid #dfe6ec;
  position: relative;
}

.container .content ul {
  display: flex;
  text-indent: 2rem;
  padding: 10px 0;
}

.container .content ul li {
  width: 400px;
}

.container .content .img {
  width: 190px;
  height: 120px;
  margin-right: 20px;
}

.container .content .img img {
  width: 100%;
  height: 100%;
}

.container .content .item p {
  font-size: 15px;
  text-align: center;
  width: 238px;
}

.content .QrcodeImg {
  width: 60px;
  height: 60px;
  margin: 10px auto;
  border: 1px solid #ccc;
}

.content .QrcodeImg img {
  width: 100%;
  height: 100%;
}

.content .inviteQrcode {
  text-align: center;
  width: 185px;
  height: 124px;
  position: absolute;
  right: 0;
  top: 5px;
}
.mytable .title {
  font-size: 20px;
  font-weight: bolder;
  display: flex;
  justify-content: space-between;
}
.mytable .title .more {
  font-size: 15px;
  font-weight: normal;
  color: $blue;
  margin-right: 20px;
  cursor: pointer;
}
.mytable .title #total {
  color: #000;
  margin-left: 20px;
}
</style>
<style lang="scss" scoped>
.flex {
  display: flex;
}
.jusu {
  justify-content: space-between;
}
.img_class {
  display: flex;
  flex-direction: column;
}
.is_flex_box {
  justify-content: space-between;
  display: flex;
  margin-top: 20px;
}
.is_flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fir {
  display: flex;
  flex-direction: column;
}
.tips_span {
  display: inline-block;
  width: 200px;
}
.flex_p_tips {
  display: flex;
  justify-content: space-around;
  .flex_span_tips {
    line-height: 30px;
  }
}
.flex_p {
  display: flex;
  line-height: 50px;
  .flex_span {
    display: inline-block;
    width: 40%;
    margin-left: 50px;
  }
}
.img_carNo {
  display: flex;
  margin-left: 50px;
  .img_box {
    width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .img {
      display: inline-block;
      width: 50%;
      height: 100px;
      background: orange;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
